<template>
	<div class="lz-authorize">
		<el-row>
			<el-form :inline="true" :model="formInline" size="small">

				<!-- <div class="el-form-item el-form-item--small" style="width: 300px;">
					<label class="el-form-item__label">区域</label>
					<div class="el-form-item__content" style="width:calc(100% - 40px)">
						<div class="el-input el-input--small">
							<input type="text" readonly autocomplete="off" class="el-input__inner" ref="zoneSelect"
								data-toggle="city-picker" data-responsive="true">
						</div>
					</div>
				</div> -->

				<el-form-item label="其他搜索">
					<el-input v-model="formInline.name" placeholder="输入姓名或手机号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fetchRemote">查询</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<div class="d-flex flex-wrap pb-3 authorize_list">
			<div class="d-inline-block person_item p-3" v-for="(item, index) of list" :key="index">
				<div class="pt-1 pb-1 pname">{{item.name}}</div>
				<div class="pt-1 pb-2 ptel">{{item.phone}}</div>
                <!-- <div class="pt-1 pb-1 pdetail">
                    <el-checkbox @change="toUnlockExplain">开锁说明</el-checkbox>
                </div> -->
				<el-button size="small" plain @click="toUnlockExplain" :disabled="checkPermission(2)">开锁</el-button>
                <el-button size="small" type="primary" @click="sendSecurity(item)" :disabled="checkPermission(2)">发送密钥</el-button>
			</div>
		</div>

        <el-pagination class="pagination pt-2 pb-2 justify-content-end" 
			@current-change="currentChange"
            background layout="prev, pager, next" :total="totalElements">
		</el-pagination>
	</div>
</template>

<script>
import BtnOperateMixin from './../../../mixins/btnOperate.mixin';
import { mapState } from 'vuex';
    export default {
        name: 'AuthorizeDialog',
        mixins: [BtnOperateMixin],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			}
		},
		watch: {
			show: {
				handler(val, oldVal) {
					this.$nextTick(() => {
						// const $input = $(this.$refs.zoneSelect);
						if (val === true) {
							// $input.citypicker();

							// let citypicker = $input.data('citypicker');
							// $input.on('cp:updated', () => {
								// this.address = citypicker.getVal();
							// });

						} else {
							// $input.citypicker('destroy');
							// $input.val(this.address = '');
							this.list = [];
							this.pageNum = 0;
							this.totalElements = 0;
						}
					});
				},
				immediate: true
			}
		},
		data() {
			return {
				address: '',

				list: [],
				formInline: {
					name: ''
				},

				pageNum: 0,
				numPerPage: 20,

				totalPages: 0,
				totalElements: 0,
			}
        },
        computed: {
            ...mapState({
                userInfo: 'userInfo'
            })
        },
        methods: {
			fetchRemote(){
				let url = this.$obHttp.Api.getAuthorizersList;
				let bussinessCode = this.userInfo.businessCode;
				this.$obHttp.httpGet(`${url}${bussinessCode}`,{
                    pageNum: this.pageNum, 
                    numPerPage: this.numPerPage,
                    name: this.formInline.name
                }).then(response=>{
					if( response ){
						let {contents, totalElements, totalPages} = response.data;
						this.list = contents;
						this.totalPages = totalPages;
						this.totalElements = totalElements;
					}
				});
			},
			currentChange(v){
				this.pageNum = v - 1;
				this.fetchRemote();
			},
			
            sendSecurity(item){
                this.$emit('sendSecurity', item);
            },
            toUnlockExplain(){
                this.$emit('toUnlockExplain');
            }
        }
	}

</script>

<style lang="scss" scoped>
	.pname {
		font-size: 20px;
		color: #3d3d3d;
		text-align: center;
	}

	.ptel {
		font-size: 18px;
		color: #3d3d3d;
		text-align: center;
	}

    .pdetail{
        text-align: center;
    }

	.person_item {
		background: #ecf5ff;
		box-shadow: 5px 5px 8px 0 rgba(40, 116, 237, 0.16);
		border-radius: 4px;
		width: 180px;
		// height: 160px;
        margin: 0 12px 30px;
		// margin-left: 12px; margin-right: 12px;
		// margin-bottom: 30px;

		&:hover {
			cursor: pointer;
		}

		.el-button:not(.delete) {
			display: block;
			margin: 0 auto;
			width: 100%;
			margin-top: 10px;
		}
	}

    .authorize_list{
        // justify-content: space-between;
        max-height: 450px;
        overflow: auto;
    }

</style>
